{% extends "base_generic.html" %}

{% block content %}
<div class="container" data-aos="fade-up">
  <header class="mb-5 text-center">
    <h1 class="display-4 fw-bold mb-4">
      <i class="fas fa-lightbulb text-warning me-3"></i>为您推荐
    </h1>
    <p class="lead col-lg-8 mx-auto">
      基于您的阅读历史和兴趣偏好，我们精心为您挑选了这些可能感兴趣的书籍
    </p>
  </header>
  
  {% if recommended_books %}
    <div class="card mb-4">
      <div class="card-body">
        <div class="alert alert-info mb-0" role="alert">
          <i class="fas fa-info-circle me-2"></i>
          <span>推荐算法结合了您的评分、收藏和点赞历史，以及其他读者的阅读偏好。持续与图书互动可以提高推荐准确度！</span>
        </div>
      </div>
    </div>

    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
      {% for book in recommended_books %}
        <div class="col" data-aos="fade-up" data-aos-delay="{{ forloop.counter|add:'50' }}">
          <div class="card h-100 book-card">
            {% if forloop.counter <= 3 %}
              <div class="recommendation-badge">
                <span class="badge bg-danger">推荐指数: {{ forloop.counter }}</span>
              </div>
            {% endif %}
            
            <div class="card-body">
              <h5 class="card-title">
                <a href="{{ book.get_absolute_url }}" class="text-decoration-none">{{ book.title }}</a>
              </h5>
              <h6 class="card-subtitle mb-2 text-muted">{{ book.author }}</h6>
              
              <!-- 评分 -->
              <div class="mb-2">
                <div class="rating">
                  {% for i in "12345" %}
                    {% if forloop.counter <= book.average_rating|floatformat:"0" %}
                      <i class="fa fa-star"></i>
                    {% elif forloop.counter <= book.average_rating|add:"0.5"|floatformat:"0" %}
                      <i class="fa fa-star-half-alt"></i>
                    {% else %}
                      <i class="fa fa-star text-muted"></i>
                    {% endif %}
                  {% endfor %}
                  <span class="ms-2 small">
                    {{ book.average_rating|floatformat:1 }} ({{ book.rating_count }} 评分)
                  </span>
                </div>
              </div>
              
              <!-- 类别标签 -->
              <div class="mb-3 recommendation-tags">
                {% for genre in book.genre.all %}
                  <span class="badge bg-light text-dark me-1">{{ genre.name }}</span>
                {% endfor %}
              </div>
              
              <p class="card-text">{{ book.summary|truncatechars:120 }}</p>
            </div>
            <div class="card-footer bg-white d-flex justify-content-center">
              <a href="{{ book.get_absolute_url }}" class="btn btn-outline-primary">
                <i class="fas fa-info-circle me-1"></i> 查看详情
              </a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="text-center py-5">
      <i class="fas fa-book-reader fa-5x text-muted mb-3"></i>
      <h2>暂无个性化推荐</h2>
      <p class="lead">
        看起来我们还没有足够的信息来为您提供个性化推荐。
        <br>试试评价一些书籍、收藏您喜欢的作品或为它们点赞，我们就能够为您提供更好的推荐！
      </p>
      <div class="mt-4">
        <a href="{% url 'books' %}" class="btn btn-primary btn-lg">
          <i class="fas fa-books me-2"></i>浏览图书馆
        </a>
      </div>
    </div>
  {% endif %}
</div>

<div class="recommendation-explanation my-5 py-5 bg-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-6 mb-4 mb-lg-0">
        <h2 class="mb-3">推荐如何工作？</h2>
        <p>我们的推荐系统基于多种算法，为您提供最符合口味的阅读体验：</p>
        <ul class="recommendation-features">
          <li>
            <i class="fas fa-users text-primary me-2"></i>
            <strong>协同过滤</strong>：分析与您有相似阅读品味的用户喜好
          </li>
          <li>
            <i class="fas fa-tags text-success me-2"></i>
            <strong>基于内容</strong>：推荐与您喜欢的书籍类型和作者相似的作品
          </li>
          <li>
            <i class="fas fa-history text-warning me-2"></i>
            <strong>历史行为</strong>：考虑您的评分、收藏和点赞历史
          </li>
          <li>
            <i class="fas fa-chart-line text-danger me-2"></i>
            <strong>流行度分析</strong>：结合书籍的整体受欢迎程度
          </li>
        </ul>
        <p class="mt-3">持续与图书互动，我们的推荐将变得越来越精准！</p>
      </div>
      <div class="col-lg-6 text-center">
        <img src="https://cdn.pixabay.com/photo/2016/03/26/22/21/books-1281581_1280.jpg" alt="推荐系统图示" class="img-fluid rounded shadow-sm">
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 添加鼠标悬停效果
    const bookCards = document.querySelectorAll('.book-card');
    bookCards.forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.classList.add('hover-effect');
      });
      
      card.addEventListener('mouseleave', function() {
        this.classList.remove('hover-effect');
      });
    });
  });
</script>
{% endblock %} 